<template>
  <div class="index-content-wrap">
    <div class="index-content bid-flex cont-betn height-c-1">
      <div class="bander-wrap">
        <div class="baner-content"></div>
        <div class="banner-topic">
          专题活动标题专题活动标题专题活动标题专题活动标题专题活动标题
        </div>
      </div>
      <div class="tab-list-wrap">
        <tabList :headerData="headerSet1" />
      </div>
    </div>
    <div class="index-content bid-flex height-c-1">
      <div class="tab-list-second-wrap" v-for="item in [0, 1, 2]" :key="item">
        <tabListSlot :headerData="headerSet2[item]" />
      </div>
    </div>
    <div class="index-content bid-flex height-c-2">
      <div class="industry-list">
        <div class="in-title">行业展示</div>
        <div class="i-item-wrap bid-flex">
          <span
            class="i-item"
            v-for="(item, index) in industryList"
            :key="index"
          >
            {{ item }}
          </span>
        </div>
      </div>
      <div class="tab-list-third-wrap">
        <tabListSlot :headerData="headerSet3" />
      </div>
    </div>
    <div class="index-content height-c-1">
      <tabListSlot :headerData="headerSet4" />
    </div>
    <div class="index-content height-c-2">
      <indexContentVr :headerData="headerSet5" />
    </div>
    <div class="index-content height-c-3">
      <indexCompanyList :headerData="headerSet6" />
    </div>
    <div class="index-content height-c-7">
      <indexOrgList />
    </div>
    <div class="index-content height-c-7">
      <indexMerchantList />
    </div>
    <div class="index-content height-c-7">
      <indexMediaList />
    </div>
    <div class="index-content height-c-7">
      <indexLinkList />
    </div>
  </div>
</template>
<script>
import tabList from "../components/tab-list.vue";
import tabListSlot from "../components/tab-list-slot.vue";
import indexContentVr from "../components/index-content-vr.vue";
import indexCompanyList from "../components/index-company-list.vue";
import indexOrgList from "../components/index-org-list.vue";
import indexMerchantList from "../components/index-merchant-list.vue";
import indexMediaList from "../components/index-media-list.vue";
import indexLinkList from "../components/index-link-list.vue";
export default {
  name: "index",
  data() {
    return {
      headerSet1: {
        navData: [
          { text: "协会动态", id: 1 },
          { text: "招投标动态", id: 2 },
          { text: "政府采购动态", id: 3 },
          { text: "公共资源交易平台动态", id: 4 }
        ]
      },
      headerSet2: [
        {
          leftSlot: "通知公告",
          rightSlot: "text",
          navData: [],
          time: ""
        },
        {
          leftSlot: "新闻资讯",
          rightSlot: "text",
          navData: [
            { text: "行业聚焦", id: 1 },
            { text: "企业动态", id: 2 }
          ],
          time: ""
        },
        {
          leftSlot: "政策法规",
          rightSlot: "text",
          navData: [],
          time: ""
        }
      ],
      industryList: [
        "能源电力",
        "房屋建筑",
        "科教文卫",
        "化学工业",
        "石油石化",
        "保险金融",
        "园林绿化",
        "水利水电",
        "水运",
        "港口航道",
        "编制轻工",
        "民航",
        "矿产冶金",
        "生态环保",
        "市政",
        "地球科学",
        "信息电子",
        "铁路",
        "广电通信",
        "商业服务",
        "公路",
        "农业牧渔",
        "机械设备",
        "其他",
        "航空航天",
        "生物医药"
      ],
      headerSet3: {
        leftSlot: "招标公告",
        rightSlot: "search",
        navData: [
          { text: "全部信息", id: 1 },
          { text: "共享资源", id: 2 },
          { text: "政府采购", id: 3 },
          { text: "企业采购", id: 4 }
        ],
        time: "2021-05-12"
      },
      headerSet4: {
        leftSlot: "品牌榜单",
        rightSlot: "text",
        navData: [
          { text: "行业名称1", id: 1 },
          { text: "行业名称2", id: 2 },
          { text: "行业名称3", id: 3 },
          { text: "行业名称4", id: 4 }
        ],
        time: "2021-05-12"
      },
      headerSet5: {
        leftSlot: "VR展厅",
        rightSlot: "text"
      },
      headerSet6: {
        leftSlot: "业主招标平台",
        comList: 1
      }
    };
  },
  components: {
    tabList,
    tabListSlot,
    indexContentVr,
    indexCompanyList,
    indexOrgList,
    indexMerchantList,
    indexMediaList,
    indexLinkList
  }
};
</script>
<style scoped>
.index-content-wrap {
  margin: 0 3.6rem;
}

.cont-betn {
  justify-content: space-between;
}

.height-c-1 {
  height: 3.82rem;
}

.height-c-2 {
  height: 4.23rem;
}

.height-c-3 {
  height: 4.38rem;
}

.index-content-wrap .index-content:first-child {
  margin-top: 0.2rem;
}
.index-content {
  margin-top: 0.3rem;
}

.bander-wrap {
  width: 5.9rem;
  position: relative;
}

.tab-list-wrap {
  width: 5.9rem;
  margin-left: 0.2rem;
}

.tab-list-second-wrap {
  width: 3.87rem;
}

.index-content .tab-list-second-wrap:nth-child(2) {
  margin: 0 0.2rem;
}

.baner-content {
  height: 100%;
  background-image: url("../assets/image/index_banner_1.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.banner-topic {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.38rem;
  text-align: center;
  color: #fff;
  font-size: 0.15rem;
  line-height: 0.38rem;
  background: rgba(0, 0, 0, 0.6);
}

.tab-list-third-wrap {
  flex: 2;
}

.industry-list {
  width: 2.85rem;
  margin-right: 0.2rem;
  color: #fff;
  background: #1571ba;
}

.in-title {
  height: 0.44rem;
  line-height: 0.44rem;
  margin: 0 0.11rem;
  font-size: 0.18rem;
  border-bottom: 0.01rem dashed #fff;
}

.i-item-wrap {
  margin-top: 0.1rem;
  flex-wrap: wrap;
}

.i-item-wrap .i-item {
  display: inline-block;
  width: 0.75rem;
  height: 0.4rem;
  margin: 0 0.1rem;
  font-size: 0.15rem;
  line-height: 0.4rem;
  overflow: hidden;
}
</style>
